<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODOLIST---每个人自己的待办事项</title>
    <link rel="stylesheet" href="./css/toDoList.css">
</head>

<body>
    <header class="title">
        <div class="w">
            <label>
                <h1>ToDoList</h1>
                <input id="todolist" type="text" placeholder="添加 todolist...">
            </label>
        </div>
    </header>
    <div class="main w">
        <div class="today-item">
            <h3 class="title">待完成事项<span class="count-span">0</span></h3>
            <ul class="item-list">
            </ul>
        </div>
        <div class="done-item">
            <h3 class="title">已完成事项<span class="count-span">0</span> </h3>
            <ul class="item-list"></ul>
        </div>
    </div>
    <footer class="w">
        <div class="copyright">copyright: &copy;TCZ~<a href="javascript:;" id="clearAll">clear</a></div>
    </footer>
    <script type="text/html" id="tpl-li">
        {{each data}}
        <li>
            <div class="content">
                <label><input type="checkbox" {{if $value.done}}checked{{/if}}><p>{{$value.title}}</p></label>
                <span class="del" data-done="{{$value.done}}"></span>
            </div>
        </li>
        {{/each}}
    </script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/localData.js"></script>
    <script src="./js/listClass.js"></script>
</body>

</html>